<template>
  <div>
     <!-- 商品列表 -->
     <div class="goods-list">
    <div class="mui-card" v-for="(item,i) in goodslist" :key="i">
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
                <mt-switch v-model="$store.getters.getgoodsselected[item.id]"
                @change="selectedchange(item.id,$store.getters.getgoodsselected[item.id])"></mt-switch>
                <img :src="item.thumb_path">
                <div>
                    <h3>{{item.title}}</h3>
                    <p><span class="price">￥{{item.sell_price}}</span>
                    <numbox :initcount="$store.getters.getgoodscount[item.id]" :id="item.id"></numbox>
                    <span class="del" @click="del(item.id,i)">删除</span></p>
                </div>
			</div>
		</div>
    </div>
    </div>
     <!-- 结算区域 -->
     <div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner between">
			<div>
                <p>总计（不含运费）</p>
                <p>已勾选商品{{$store.getters.getgoodsAll}}件，总价：￥{{$store.getters.getgoodssum}}</p>
            </div>
            <mt-button type="danger">去结算</mt-button>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import numbox from '@/components/public/car-numbox.vue'
    export default {
       data(){
           return {
               goodslist: [],//购物车商品列表
           }
       },
       created(){
           this.getlist()
       },
       methods: {
           getlist(){ //获取购物车里的商品列表
               var list = [] //用来放置商品的id
               
               this.$store.state.car.forEach(item=>{
                   list.push(item.id)
               })
               if(list.length == 0){ //如果本地存储中没有加入购物车的数据
                    return;
               }else{ //购物车中有数据，根据id从接口获取购物车商品列表
                   this.$http.get('api/goods/getshopcarlist/' + list.join(',')).then(result=>{
                       this.goodslist = result.body.message
                   })
               }  
           },
           del(id,index){
               this.goodslist.splice(index,1)
               //根据id删除购物车内的商品
                this.$store.commit('del',id)
           },
           selectedchange(id,val){
               //每当点击开关，把最新的开关状态同步到store中
            //    console.log(id+'----'+val)
            this.$store.commit('updataselected',{id,selected:val})
           }
       },
       components: {
           numbox
       }
    }
</script>

<style scoped lang="scss">
    .goods-list {
        background-color: #ccc;
        padding: 6px;
    }
    .mui-card-content-inner {
        display: flex
    }
    img {
        width: 40px;
        height: 60px;
        margin: 0 10px
    }
    h3 {
        font-size: 14px;
        font-weight: 700
    }
    .price {
        color: red;
        margin-right: 10px
    }
    .del {
        margin-left: 10px;
        color: skyblue
    }
    .between {
        justify-content: space-between;
    }
    
   
</style>

